<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div>
      <a-form @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :md="6" :sm="12">
            <a-form-item label="流程名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input placeholder="请输入流程名称" v-model="queryParam.processDefinitionName"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <a-form-item>
              <a-button type="primary" @click="searchQuery()" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset()" icon="reload" style="margin-left: 8px">重置</a-button>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <div>
      <vxe-grid
        id="ProcessList"
        ref="vxeTable"
        v-bind="gridOptions"
        :row-config="{keyField:'code'}"
      >
      <template #action="{ row }">
        <a href="javascript:;" @click="handleDetail(row)">查看</a>
        <a-divider type="vertical" v-if="row.state ==='ACTIVE'" />
        <a href="javascript:;" @click="handleSuspend(row)" v-if="row.state ==='ACTIVE'">暂停</a>
        <a-divider type="vertical" v-if="row.state ==='SUSPENDED'" />
        <a href="javascript:;" @click="handleRestart(row)" v-if="row.state ==='SUSPENDED'">开始</a>
      </template>
      <template #state="{ row }">
        <a-tag :key="row.id" color="orange" v-if="row.state ==='ACTIVE'">审批中</a-tag>
        <a-tag :key="row.id" color="#f50" v-if="row.state ==='SUSPENDED'">已暂停</a-tag>
        <a-tag :key="row.id" color="green" v-if="row.state ==='COMPLETED'">已完成</a-tag>
      </template>
    </vxe-grid>
    </div>
    <TaskPendingModal ref="modalForm" type="history" />
  </a-card>
</template>

<script>
import VxeTableListMixin from '@/mixins/VxeTableListMixin'
import TaskPendingModal from '../task/modules/TaskPendingModal'
import { getAction } from '@/services/manage'
import moment from 'moment'
export default {
  name: 'ProcessList',
  components: { TaskPendingModal },
  mixins: [VxeTableListMixin],
  data() {
    return {
      columns: [
        { type: 'seq', width: 40 },
        { title: '流程编码', field: 'processDefinitionKey' },
        { title: '流程名称', field: 'processDefinitionName' },
        { title: '流程版本', field: 'processVersion' },
        { title: '开始时间', field: 'startTime', slots: { default: ({ row }) => {
          return row.startTime ? moment(row.startTime).format('YYYY-MM-DD HH:mm:ss') : ''
        } }},
        { title: '申请人', field: 'startUserId', formatter: 'dictText' },
        { title: '审批状态', field: 'state', slots: { default: 'state' }},
        { title: '操作', slots: { default: 'action' }, width: 170 }
      ],
      url: {
        list: '/camunda/process/page',
        suspend: '/camunda/process/suspend/',
        restart: '/camunda/process/restart/'
      },
      toolbarConfig: {
        buttons: [],
        import: false
      }
    }
  },
  methods: {
    handleRestart(row) {
      getAction(`${this.url.restart}${row.id}`).then(res => {
        if (res.success) {
          this.$message.success('重启成功')
          this.loadData()
        }
      })
    },
    handleSuspend(row) {
      getAction(`${this.url.suspend}${row.id}`).then(res => {
        if (res.success) {
          this.$message.success('暂停成功')
          this.loadData()
        }
      })
    },
    handleDetail(row) {
      row.processInstanceId = row.id
      this.$refs.modalForm.show(row)
    }
  }
}
</script>

